<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE html>
<!-- saved from url=(0081)https://passport.58.com/reg/?PGTID=0d100000-0007-a4f4-b953-b22766254752&ClickID=1 -->
<html>

<head lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户注册</title>
<link rel="stylesheet"
	href="<%=path%>/static/studentRegist/mobile_reg_v20171123144136.css">
</head>

<body>

	<img src="<%=path%>/static/studentRegist/reg-bg.png" alt=""
		width="100%" height="100%"
		style="z-index:-1;position:fixed;_position:absolute;left:0;right:0;bottom:0;top:0;_left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));">
	<div id="overlay"></div>
	<div id="regContent">
		<div id="outregBox">
			<div id="backtoindex">
				<a href="javascript:;">返回首页</a>
			</div>
			<div id="goLogin">
				已有账户？ <a href="javascript:;">去登录</a>
			</div>
		</div>
		<div class="wrap">

			<div id="regLogo"
				style="background-image: url('<%=path%>/static/studentRegist/logo.png');background-size: cover; 
	background-repeat: no-repeat;"
				class="regLogo regLogo58">
				<a id="logoHref" href="javascript:;"></a>
			</div>
			<div id="regBox" class="regBox">

				<form action="<%=path%>/student/regist" method="get"
					name="myForm" id="myForm">

					<ul id="regUl" class="regUl">
						<!--手机号-->
						<li id="regMobileLi" class="regLi regMobile"><span
							class="regLable">手机号</span> <input type="text" placeholder="手机号"
							name="regMobilephone" id="regMobilephone" class="regMobile regInput"
							maxlength="11" autocomplete="off">
						</li>
						<li id="regMobileTip" class="regMobileTip regTip regMobileTipKeep"
							style="display: none;"><span id="regMobileTipText"
							class="regTipText regMobileTipTextKeep">请填写正确的手机号</span>
						</li>

						<!-- username -->
						<li id="regMobileUsernameLi" class="regLi regMobileUsernameLi">
							<span class="regLable">用户名</span> <input type="text"
							placeholder="用户名" id="regMobileUsername" name="regMobileUsername"
							class="regMobileUsername regInput" maxlength="20"
							autocomplete="off">
						</li>

						<li id="regMobileUsernameTip" class="regMobileTip regTip regMobileTipKeep"
							style="display: none;"><span id=regMobileTipUsernameText
							class="regTipText regMobileTipTextKeep">请输入2-6位用户名</span>
						</li>

						<!--设置密码-->
						<li id="regPasswordLi" class="regLi"><span class="regLable">设置密码</span>
							<input type="password" placeholder="设置密码" id="regMobilePassword" name="regMobilePassword" class="regPassword regInput" maxlength="16" autocomplete="off">
						</li>
						<li id="regMobilePasswordTip" class="regMobileTip regTip regMobileTipKeep"
							style="display: none;"><span id="regMobileTipText"
							class="regTipText regMobileTipTextKeep">请输入6-16位密码</span>
						</li>

						<!--确认密码-->
						<li id="regRepasspordLi" class="regLi">
							<span class="regLable">确认密码</span>
							<input type="password" placeholder="确认密码" id="regRepasswordText" name="regRepasswordText" class="regRepassword regInput" maxlength="16" autocomplete="off">
						</li>
						<li id="regRepasswordTip" class="regMobileTip regTip regMobileTipKeep"
							style="display: none;"><span id="regRepasswordTipText"
							class="regTipText regMobileTipTextKeep">两次密码不相同</span>
						</li>

						<!--登录按钮-->
						<li id="regButtonLi" class="regButtonLi regLi">
							<div id="regAgreementBox">
								<input type="checkbox" checked="checked"
									id="regAgreementCheckbox"> <span>我已阅读并同意 <a
									id="regAgreement" target="_blank"
									href="http://about.58.com/home/announcement.html">《58同城使用协议》</a>
									&amp; <a id="regAgreementPrivacy" target="_blank"
									href="http://about.58.com/395.html">《隐私权条款》</a></span>

							</div>
							<div class="regButtonBox">
								<input type="submit" value="注册" id="regButton" class="regButton">
							</div>
						</li>
					</ul>
				</form>
		<div class="login-footer">
			<span id="footerTip" href="javascript:;">© 58.com</span><span>|</span>
			<a href="javascript:;" target="_blank">联系客服</a><span>|</span> <a
				href="javascript:;" target="_blank">帮助</a>
		</div>
	</div>
</body>

<script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
<script type="text/javascript">
	$(function() {
	
	/* 表单提交校验  */
	$("#myForm").submit(function(){
		if(sjh==1 && nc==1 && mm==1 && remm==1){
			return true;
		}else{
			return false;
		}
	});
	
	var sjh = 0;
	var nc = 0;
	var mm = 0;
	var remm = 0;
	/* 手机号校验 */
		$("#regMobilephone").blur(function() {
			var phone = $(this).val();
			if (phone.length < 11) {
				$("#regMobileTip").css("display", "block");
				sjh = 0;
			} else {
				$("#regMobileTip").css("display", "none");
				$.ajax({
					url:"<%=path %>/student/phone",
					data:{"phone":phone},
					success:function(data){
						if(data == "yes"){
							$("#regMobileTipText").html("该手机号已注册");
							$("#regMobileTip").css("display", "block");
							sjh = 0;
						}else{
							sjh = 1;
						}
					}
				});
			}
			
		});
		
		/* 用户名校验 */
		$("#regMobileUsername").blur(function(){
			var name = $(this).val();
			if (name.length < 2 || name.length > 6) {
				$("#regMobileUsernameTip").css("display", "block");
				nc = 0;
			} else {
				$("#regMobileUsernameTip").css("display", "none");
				$.ajax({
					url:"<%=path %>/student/username",
					data:{"username":name},
					success:function(data){
						if(data == "yes"){
							$("#regMobileTipUsernameText").html("该用户名已存在");
							$("#regMobileUsernameTip").css("display", "block");
							nc = 0;
						}else{
							nc = 1;
						}
					}
				});
			}
		});
		
		/* 密码校验 */
		$("#regMobilePassword").keyup(function(){
			var pwd = $(this).val();
			var sum = complex(pwd);
			if (pwd.length > 10) {
				sum++;
			}
			//依照密码强度，改变颜色
			var colors = [ "red", "yellow", "greenyellow", "green" ];
			$(this).css("color", colors[sum-1]);
		});
		
		$("#regMobilePassword").blur(function(){
			var pwd = $(this).val();
			if(pwd.length <6){
				$("#regMobilePasswordTip").css("display", "block");
				mm = 0;
			}else{
				$("#regMobilePasswordTip").css("display", "none");
				mm = 1;
			}
		});
		
		/* 确认密码  */
		$("#regRepasswordText").blur(function(){
			var pwd = $("#regMobilePassword").val();
			var rePwd = $(this).val();
			
			if(pwd != rePwd){
				$("#regRepasswordTip").css("display", "block");
				remm = 0;
			}else{
				$("#regRepasswordTip").css("display", "none");	
				remm = 1;
			}
		});
	});
	
	/* 复杂度 */	
	function complex(pwd){
		var dx = 0,
			xx = 0,
			sz = 0;
		for (var i = 0; i < pwd.length; i++) {
			var c = pwd.charAt(i);
			if(c >= 'a' && c <= 'z'){
				xx = 1;
			}
			if(c >= 'A' && c <= 'Z'){
				dx = 1;
			}
			if(c >= '0' && c <= '9'){
				sz = 1;
			}
		}
		return dx+xx+sz;
	}
	
</script>

</html>